<template>
  <div class="hard-cash">
    <div class="tanking">
      <div class="hardf-title">
        <div class="title">{{ title }} {{ text }}——区域分布</div>
        <div class="close-girl" @click="closeButton"></div>
      </div>
      <div ref="chartArea" id="chart-area"></div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits, onMounted } from "vue";
import * as echarts from "echarts";
import { postRequest } from "../utils/request";
const emits = defineEmits(["close-area"]);
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  text: {
    type: String,
    default: "",
  },
});
let chartArea = ref(null);
let closeButton = () => {
  emits("close-area", false);
};
let initChart = (val) => {
  let data = [
    {
      value: 0,
      name: "西南区域",
      odl: "西南区域中心",
      itemStyle: {
        borderColor: "#C2F4FF",
        borderWidth: 2,
        color: "#CB9DEE",
      },
    },
    {
      value: 0,
      name: "华南区域",
      odl: "华南区域中心",
      itemStyle: {
        borderColor: "#C2F4FF",
        borderWidth: 2,
        color: "#2691DA",
      },
    },
    {
      value: 0,
      name: "华中区域",
      odl: "华中区域中心",
      itemStyle: {
        borderColor: "#C2F4FF",
        borderWidth: 2,
        color: "#EE5890",
      },
    },
    {
      value: 0,
      name: "华东区域",
      odl: "华东区域中心",
      itemStyle: {
        borderColor: "#C2F4FF",
        borderWidth: 2,
        color: "#FAC44C",
      },
    },
    {
      value: 0,
      name: "华北区域",
      odl: "华北区域中心",
      itemStyle: {
        borderColor: "#C2F4FF",
        borderWidth: 2,
        color: "#A1E14B",
      },
    },
  ];
  let sale = 0;
  if (val && val.length > 0) {
    val.forEach((item) => {
      data.forEach((oper) => {
        if (item.qyzxmc == oper.odl) {
          if (props.title.startsWith("收款")) {
            if (props.text == "一码通") {
              oper.value = item.xszeYmt;
            } else if (props.text == "充值卡") {
              oper.value = item.xszeCzk;
            } else if (props.text == "应收款") {
              oper.value = item.xszeYsk;
            }
            sale += item.xszeYmt + item.xszeCzk + item.xszeYsk;
          } else {
            if (props.text == "一码通") {
              oper.value = item.yszeYmt;
            } else if (props.text == "充值卡") {
              oper.value = item.yszeCzk;
            } else if (props.text == "应收款") {
              oper.value = item.yszeYsk;
            }
            sale += item.yszeYmt + item.yszeCzk + item.yszeYsk;
          }
        }
      });
    });
  }
  let option = {
    tooltip: {
      trigger: "item",
      formatter: function (params) {
        return params.name + " : " + params.percent + "万元";
      },
      backgroundColor: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "225ea2", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "71a5db", // 100% 处的颜色
          },
        ],

        global: false, // 缺省为 false
      },
      textStyle: {
        color: "#fff", // 设置字体颜色为黄色
      },
      borderWidth: 0, // 设置边框宽度为 2px
    },
    grid: {
      left: "2%",
      right: "2%",
      top: "2%",
      bottom: "2%",
    },
    series: [
      {
        type: "pie",
        radius: [20, 120],
        center: ["50%", "50%"],
        roseType: "area",
        emphasis: {
          itemStyle: {
            shadowBlur: 30,
            shadowOffsetX: 5,
            shadowOffsetY: 5,
            shadowColor: "rgba(0, 0, 0, 1)",
          },
        },
        data,
        animationType: "scale", // 使用缩放动画
        animationEasing: "elastic", // 采用弹性动画
        label: {
          color: "#fff",
          fontSize: 16,
          position: "outside",
          formatter: function (params) {
            return [
              "{top|" + params.name + params.percent + "万元}", // 第一段（名称）
              "{bottom|占比:" +
                ((params.percent / sale) * 100).toFixed(2) +
                "%}", // 第二段（占比）
            ].join("\n");
          }, // 显示名称和百分比
          alignTo: "labelLine",
          bleedMargin: 3,
          overflow: "none",
          rich: {
            top: {
              // 名称段样式：靠近延伸线（底部对齐）
              verticalAlign: "bottom",
              padding: [18, 0, 0, 0], // 向下微调间距
              fontSize: 16,
            },
            bottom: {
              // 占比段样式：远离延伸线（顶部对齐）
              verticalAlign: "top",
              padding: [18, 0, 0, 0], // 向上微调间距
              fontSize: 14,
            },
          },
        },
        labelLayout: function (params) {
          const rect = params.rect;
          const labelRect = params.labelRect;
          const centerX = rect.x + rect.width / 2;
          if (labelRect.x < centerX) {
            return {
              align: "right", // 左侧标签右对齐
              dx: 100, // 向右移动（向中间靠拢）
              dy: -10, // 向上移动（负值表示向上）
            };
          } else {
            return {
              align: "left", // 右侧标签左对齐
              dx: -100, // 向左移动（向中间靠拢）
              dy: -10, // 向上移动（所有标签统一上移）
            };
          }
        },
        labelLine: {
          show: true, // 显示延伸线
          length: 40, // 延伸线第一段长度
          length2: 110, // 延伸线第二段长度
          smooth: false, // 延伸线是否平滑
          maxSurfaceAngle: 70, // 延伸线最大角度
        },
      },
      {
        type: "pie",
        radius: 20,
        center: ["50%", "50%"],
        data: [{ value: 0, name: "" }],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        itemStyle: {
          color: "#fff",
        },
        silent: true,
      },
    ],
  };

  const chart = echarts.init(chartArea.value);
  chart.setOption(option);
};

onMounted(() => {
  postRequest("/screen/query/getCwYyqkfxQy", "年")
    .then(({ code, data }) => {
      if (code == 200) {
        initChart(data);
      } else {
        initChart([]);
      }
    })
    .catch((error) => {
      console.error("请求失败:", error);
    });
});
</script>
<style lang="less" scoped>
.hard-cash {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .tanking {
    width: 35vw;
    height: 41vh;
    background: #2f5892e0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .hardf-title {
    width: 34vw;
    height: 7vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: Dream Han Sans CN;
    font-weight: normal;
    font-size: 1.4vw;
    color: #ffffff;
    text-shadow: 0px 3px 7px rgba(1, 4, 8, 0.66);
    opacity: 0.97;
    border-bottom: #32d7e9c0 1px solid;
    .title {
      width: 80%;
    }
    .close-girl {
      width: 44px;
      height: 44px;
      background: url("../assets/close.png") no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
  }
  #chart-area {
    width: 35vw;
    height: 33.5vh;
  }
}
</style>
